<template>
    <div>
        <div class="container">
            <div class="top">
                <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft" />
            </div>
            <img :src="detail.banner" alt="" width="100%">
            <div class="detail">
                <p class="name"><b>{{ detail.name }}</b></p>
                <p class="price">￥<b>{{ detail.price }}</b></p>
                <p class="spec">规格：{{ detail.specs }}</p>
            </div>
            <div class="server">
                <p><span>选择：</span>{{ detail.specs }}</p>
                <p><span>发货：</span>{{ detail.supplier }}</p>
                <p><span>保障：</span>假一赔十·极速退款·不支持7天退换</p>
                <p><span>参数：</span>品牌 系列 ...</p>
            </div>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
            <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
            <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
            <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
        </van-action-bar>
    </div>
</template>

<script>
import { getProDetail } from '@/request/request';
import { createApp } from 'vue';
import { NavBar } from 'vant';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';

const app = createApp();
app.use(ActionBar);
app.use(ActionBarButton);
app.use(ActionBarIcon);
app.use(NavBar);
export default {
    created() {
        let { typeid, proid } = this.$route.query
        getProDetail(typeid, proid).then(data => {
            this.detail = data
            console.log(this.detail);
        })
    },
    data() {
        return {
            detail: []
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onClickIcon() {
            Toast('点击图标');
        },
        onClickButton() {
            Toast('点击按钮');
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding-bottom: 50px;
    background-color: #eee;
    width: 100%;
    img{
        width: 100% !important;
    }

    .detail {
        margin: 10px;
        background-color: #fff;
        border-radius: 10px;

        .price {
            padding: 0;
            color: #f00;

            b {
                font-size: 20px;
            }

            padding: 0 10px;
            line-height: 30px;
        }

        .spec {
            color: #999;
        }

        padding: 10px;
    }

    .server {
        margin: 10px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;

        p {
            padding: 0;

            span {
                color: #999;
            }

            padding: 0 10px;
            line-height: 30px;
        }
    }
}
.van-action-bar {
    bottom: 50px !important;
}
</style>
